<template>
  <div>
    <div class="hmtext">
        <van-grid :column-num="4" :border="false">
            <van-grid-item v-for="(v,index) in imgarr" :key="index" class="gezi" @click="fun(index)" > 
            <img :src="v" alt="">
            <span>{{ textarr[index] }}</span>
        </van-grid-item>
        </van-grid>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgarr: [],
            textarr:[]
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/navigation"
        }).then(res => {
            res.data.forEach(element => {
                this.imgarr=element.data.myimg
                this.textarr = element.data.hxtext
            });
        })
    },
    methods: {
        fun(index) {
            if (index == 0) {
                this.$router.push({
                    path:"/qinbo"
                }).catch(err=>err)
            } else if (index == 1) {
                this.$router.push({
                    path:"/tianxuan"
                }).catch(err=>err)
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.hmtext{
    width: 100vw;
    height: 40.7vw;
    .gezi{
        width: 20vw;
        height: 20vw;
        img{
            width: 48px;
        }
        span{
            font-size: 2vw;
        }
    }
}

</style>